<template>
	<view class="content" :style="{paddingTop: paddingTop}">
		<view class="bot-img-2" v-if="headOpenBox" @click="openHead()">
			<view class="img-bgc"></view>
			<image src="../../static/lianxi_open.png" mode=""></image>
		</view>
		<view class="head-fixed" v-if="headBox">
			<view class="hr-head">
				<view class="hr-he-img">
					<image src="../../static/logo.png"></image>
					<view class="hr-name">HR</view>
				</view>
				<view class="hr-date">最新：{{ all }}</view>
				<view class="zaizhao" @click="zaizZhiw()">
					<view class="right-line"></view>
					<!-- <view class="zz-num">22个</view> -->
					<view class="zz-tit">在招职位</view>
					<image src="../../static/more_right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bot-img" v-if="headBox" @click="hideHead()">
			<view class="img-bgc"></view>
			<image src="../../static/position-right.png" mode=""></image>
		</view>
		<view class="msg-item-right" v-for="item,i in list" :key="i">
			<view class="msg-item-date">
				<text>{{ item.created_at }}</text>
			</view>
			<!-- 右边 -->
			<view class="msg-item-right-box" v-if="item.is_myself == 1">
				<view class="msg-item-img">
					<!-- <image :src="item.user.head_img"></image> -->
					<image src="../../static/logo.png"></image>
				</view>
				<view class="msg-item-cont">{{ item.content }}</view>
			</view>
			<!-- 左边 -->
			<view class="msg-item-left-box" v-else>
				<view class="msg-item-img">
					<image :src="item.user.head_img"></image>
				</view>
				<view class="msg-item-cont">{{ item.content }}</view>
			</view>
		</view>
		<view class="bot-com">
			<view class="com-img">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<input cursor-spacing="20" v-model="content" />
			<button v-if="content!==''" @click="send()">发送</button>
			<view v-else></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				all:'',
				list:[],
				listtt:[],
				content:'',
				headBox:true,
				headOpenBox:false,
				paddingTop:160+'upx',
			}
		},
		onShow() {
			this.getScroll()
		},
		async onLoad(e) {
			this.id=e.user_id2
			await this.getData()
			this.getScroll()
			this.getUserid()
			// setInterval(this.getData,2000);
		},
		methods: {
			async getData() {
				const res = await this.get('/Index/User/get_user_message', {'user_id2':this.id})
				this.list = res.data
				for(let i in res.data){
					let arr = new Array(res.data[i].created_at)
					for(let i in arr){
						let allArll = []
						allArll.push(arr[i])
						this.all = allArll[allArll.length-1]
					}
				}
			},
			async getUserid() {
				const res = await this.get('/index/Index/get_company_info_by_user_id', {'user_id':this.id})
				if(res.code == 200){
					this.listtt = res.data
				}
			},
			getScroll(){
				uni.pageScrollTo({
					scrollTop: 99999999999,
					duration: 300
				})
			},
			async send(){
			    const res = await this.get('/Index/User/add_user_message',{'user_id2':this.id,'content': this.content})
				this.getScroll()
				if(this.content != ''){
					this.content = ''
					this.getData()
				}
			},
			hideHead(){
				this.headBox = false
				this.headOpenBox = true
				this.paddingTop = 10 + 'upx'
			},
			openHead(){
				this.headBox = true
				this.headOpenBox = false
				this.paddingTop = 160 + 'upx'
			},
			zaizZhiw(){
				uni.navigateTo({
					url:'../my/enterprise/companyDetails?id='+this.listtt.id+'&identity=0'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 150upx;
		.head-fixed{
			z-index: 1;
			width: 750upx;
			padding: 20upx;
			background: #FFFFFF;
			border-bottom: 2upx solid #e5e5e5;
			position: fixed;
			// #ifdef MP-WEIXIN
			top: 0;
			// #endif
			// #ifndef MP-WEIXIN
			top: 88upx;
			// #endif
			left: 0;
			.hr-head{
				display: flex;
				align-items: center;
				// justify-content: space-between;
				.hr-he-img{
					display: flex;
					align-items: center;
					image{
						width: 92upx;
						height: 92upx;
						border-radius: 50%;
					}
					.hr-name{
						font-size: 30upx;
						font-weight: bold;
						margin: 0 14upx;
						// margin: 0 50upx 0 14upx;
					}
				}
				.hr-date{
					color: #3291F8;
					font-size: 24upx;
					margin: 0 40upx 0 50upx;
				}
				.zaizhao{
					display: flex;
					align-items: center;
					.right-line{
						height: 78upx;
						border-right: 2upx solid #E3E3E3;
					}
					.zz-num{
						color: #3291F8;
						font-size: 30upx;
						font-weight: bold;
						margin: 0 0 10upx 26upx;
					}
					.zz-tit{
						color: #8A8A8A;
						font-size: 24upx;
						margin: 0 2upx 0 22upx;
					}
					image{
						width: 24upx;
						height: 24upx;
						margin-top: 2upx;
					}
				}
			}
		}
		.bot-img-2{
			position: fixed;
			left: 345upx;
			// #ifdef MP-WEIXIN
			top: 0;
			// #endif
			// #ifndef MP-WEIXIN
			top: 88upx;
			// #endif
			.img-bgc{
				width: 60upx;
				height: 24upx;
				background-color: #E4E5E7;
				border-radius: 0 0 16upx 16upx;
				position: absolute;
			}
			image{
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 10upx;
				top: -8upx;
			}
		}
		.bot-img{
			position: fixed;
			left: 345upx;
			// #ifdef MP-WEIXIN
			top: 130upx;
			// #endif
			// #ifndef MP-WEIXIN
			top: 222upx;
			// #endif
			.img-bgc{
				width: 60upx;
				height: 24upx;
				background-color: #E4E5E7;
				border-radius: 0 0 16upx 16upx;
				position: absolute;
			}
			image{
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 10upx;
				top: -8upx;
			}
		}
		.msg-item-right{
			.msg-item-date{
				text-align: center;
				margin-top: 30upx;
				text{
					color: #AEAEAE;
					font-size: 24upx;
				}
			}
			.msg-item-right-box{
				display: flex;
				flex-direction: row-reverse;
				.msg-item-img{
					image{
						width: 92upx;
						height: 92upx;
						border-radius: 50%;
						margin: 40upx 28upx 0 22upx;
					}
				}
				.msg-item-cont{
					// display: flex;
					// flex-wrap: wrap;
					word-wrap: break-word;
					width: 472upx;
					font-size: 32upx;
					margin-top: 30upx;
					line-height: 45upx;
					padding: 20upx 20upx;
					border-radius: 10upx;
					box-shadow: 0 2upx 10upx 2upx rgba(0, 0, 0, 0.2);
				}
			}
		}
		.msg-item-left{
			.msg-item-date{
				text-align: center;
				margin-top: 30upx;
				text{
					color: #AEAEAE;
					font-size: 24upx;
				}
			}
			.msg-item-left-box{
				display: flex;
				.msg-item-img{
					image{
						width: 92upx;
						height: 92upx;
						border-radius: 50%;
						margin: 40upx 28upx 0 22upx;
					}
				}
				.msg-item-cont{
					width: 472upx;
					font-size: 32upx;
					margin-top: 30upx;
					line-height: 45upx;
					padding: 20upx 20upx;
					border-radius: 10upx;
					box-shadow: 0 2upx 10upx 2upx rgba(0, 0, 0, 0.2);
				}
			}
		}
		.bot-com{
			width: 100%;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			padding: 20upx 30upx;
			box-shadow: 0 -5upx 5upx 0 rgba(0, 0, 0, 0.1);
			position: fixed;
			bottom: 0;
			left: 0;
			.com-img{
				image{
					width: 44upx;
					height: 44upx;
					margin-top: 8upx;
					border-radius: 50%;
				}
			}
			input{
				width: 100%;
				height: 68upx;
				font-size: 28upx;
				margin: 0 10upx;
				padding: 0 20upx;
				border-radius: 40upx;
				border: 2upx solid #c0c4cc;
				position: relative;
			}
			button{
				height: 68upx;
				width: 150upx;
				color: #3291F8;
				font-size: 28upx;
				line-height: 68upx;
				border-radius: 50upx;
				background-color: #FFFFFF;
				border: 2upx solid #3291F8;
			}
		}
	}
</style>
